import {Link} from 'react-router-dom';
import {Select, Button, Input, Modal, Form, Row, Col, Table, Breadcrumb, Icon,Popconfirm,Upload} from 'antd';
const Option = Select.Option;
const FormItem = Form.Item;

import * as Actions from './actions'
import UploadImage from './../../common/utils/app.service'
import Utils from './../../common/utils/utils'
import * as CONSTANTS from './../../common/utils/constants'

class List extends React.Component {
  state = {
    list: [],
    pagination: {},
    loading: false,
    toAuditLoading: false,
    selectedId: '',
    imgBoxVisible: false,
    imgUrl: '',
    limit: 10,
    filters: {},
    pageSize: 10,
    pageNum: 0,
    typeList: [
      {
        id: '',
        name: '全部'
      }
    ],
  };

  constructor(props) {
    super(props);
  }

  componentDidMount() {
    this.getList();
    // console.log('11',location,this.props.match);
  }

 

  // 搜索条件审核状态的改变
  handleStatusChange = (value) => {

  };

  handleSearch = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      this.setState({
        filters: values
      });
      this.getList({...values})
        console.log('search',values);
    });
  };

  handleTableChange = (pagination, filters, sorter) => {
    const pager = {...this.state.pagination};
    pager.current = pagination.current;
    pager.pageSize = pagination.pageSize;
    this.setState({
      pagination: pager,
    });
    this.getList({
      pageSize: pagination.pageSize,
      pageNum: pagination.current - 1,
      ...this.state.filters
    });
  };

  //每页大小的处理方法
  handleOnShowSizeChange = (current, size) => {
    console.log('current',current);
    console.log('size',size);
    const pager = {...this.state.pagination};
    pager.current = current;
    this.setState({
      pagination: pager,
      pageSize:size,
    });
  };



  getList = (params) => {
    params = {pageNum: this.state.pageNum, pageSize: this.state.pageSize, ...params};
    this.setState({loading: true});
    Actions.getQuestionList({...params}).then((result) => {
      const pagination = {...this.state.pagination};
      pagination.current = params.pageNum + 1;
      pagination.total = result.body.totalCount;
      pagination.showSizeChanger = true;
      pagination.showQuickJumper = true;
      pagination.pageSizeOptions = ['10','20','30','50','100'];
      pagination.onShowSizeChange = (current,size) => {
        this.handleOnShowSizeChange(current,size);
      };
      pagination.showTotal = (total) => {
        return `总共 ${total} 条`
      };
       /**对拿到的数据进行排序，这里赋值的是地址 */
       var list=result.body.rows;
       list.sort((p1,p2)=>{
         return p1.sortNo-p2.sortNo
 
       })
      this.setState({
        loading: false,
        pagination,
        list: result.body.rows
      });
    });

  };

  // 查看大图
  handleShowBigImg = (url) => {
    this.setState({
      imgBoxVisible: true,
      imgUrl: url
    });
    Modal.info({
      title: '查看大图',
      width: 400,
      content: (
        <div>
          <img src={url} alt="" width={300}/>
        </div>
      ),
      onOk() {},
    });
  };





  onDelete = (id)=>{
    let page = this;
    Actions.deleteInformation({id}).then(response => {

      if (response.errorCode === 0) {
        Utils.dialog.success('删除成功');
        page.getList();
      } else {
        Utils.dialog.error(response.msg)
      }
    })
  }

  render() {
    let {match} = this.props,page = this,{fileList,typeList} = this.state;
    const {getFieldDecorator} = this.props.form;
    const formItemLayout = {
      labelCol: {span: 5},
      wrapperCol: {span: 19},
    };
    const colLayout = {
      xs: {span: 18},
      sm: {span: 6},
    };
    const columns = [
     


      {
        title: "题目",
        dataIndex: "title",
        key: "title"
      },


      {
        title: "答案",
        dataIndex: "answer",
        key: "answer",
       
      },
     
      {
        title: "创建时间",
        dataIndex: "createTime",
        key: "createTime",
        render(endTime) {
          return Utils.formatDate(endTime, 'YYYY-MM-DD hh:ii')
        }
      },
     


      {
        title: "操作",
        dataIndex: "id",
        key: "id",
        render: (id, record, index) => {
          console.log('...',id, record, index)
            return (
                    <div>
                      <Popconfirm placement="left" title={'确定删除？'} onConfirm={() => this.onDelete(id, index)}
                                  okText="确定" cancelText="取消">
                        <Button icon='delete'>删除</Button>
                      </Popconfirm>
                      <Link to={`${this.props.match.url}/detail/${id}`}><Button icon='eye'>查看详情</Button></Link>
                    </div>
                )

        }
      }
    ]
      const rowSelection = {
          onChange: (selectedRowKeys, selectedRows) => {
            let ids = selectedRowKeys;
            page.setState({ids})
              console.log(`onChange-selectedRowKeys: `,ids, 'selectedRows: ', selectedRows);
          },
          onSelect: (record, selected, selectedRows) => {
              console.log('onSelect',record, selected, selectedRows);
          },
          onSelectAll: (selected, selectedRows, changeRows) => {
              console.log(selected, selectedRows, changeRows);
          },
          getCheckboxProps: record => ({
              disabled: record.name === 'Disabled User',    // Column configuration not to be checked
          }),
      };
    return (
      <div id="wrap">
        <Breadcrumb className="breadcrumb">
          <Breadcrumb.Item>
            <Icon type="bars"/>
            <span>题目列表</span>
          </Breadcrumb.Item>
        </Breadcrumb>

        <div className="content">
        <Form
                className="ant-advanced-search-form"
                onSubmit={this.handleSearch}
            >
                <Row
                    gutter={40}>
                    <Col {...colLayout} key='2'>
                        <FormItem {...formItemLayout} label='标题名称 '>
                            {getFieldDecorator('title')(<Input />)}
                        </FormItem>
                    </Col>

                    {/* <Col {...colLayout} key='3'>

                        

                        <FormItem {...formItemLayout} label='分类'>
                          {getFieldDecorator('typeId',{
                            initialValue: ''
                          })(
                              <Select>
                                {this.state.typeList.map(record => {
                                  return <Option value={record.id} key={record.id}>{record.name}</Option>
                                })}
                              </Select>
                          )}
                        </FormItem>
                    </Col> */}

                    

                    <Col span={24} style={{textAlign: 'right',}} className='searchBtn'>
                        <Button type="primary" htmlType="submit">查询</Button>
                    </Col>
                </Row>
            </Form>

          <Link to={`${match.url}/add`}><Button type="primary" style={{margin: "0px 0px 12px"}}>新增资讯</Button></Link>
          <Table columns={columns}
                 rowKey='id'
                 dataSource={this.state.list}
                 pagination={this.state.pagination}
                 loading={this.state.loading}
                 onChange={this.handleTableChange}
                 rowSelection={rowSelection}
          />

        </div>

      </div>
    )
  }
}

const ExamList = Form.create()(List)
export default ExamList
